Jump to content
  • 0

Любителям блочной верстки на засыпку!


shamahn
 Share

Question

Ну, во первых, здравствуйте! ;)

Начал я совсем недавно пытаться верстать дивами. Не скажу, что получаю удовольствие, что были моменты, которых я бы не сделал таблицами, но тем не менее стремлюсь к прогрессивному. А теперь, уважаемые знатоки, вопрос:

2столбцовый макет. Ширина левого меняется произвольно (в зависимости от содержимого). Правый - от конца левого и до конца экрана.

С помощью таблиц - решается очень прозрачно. Хотелось бы увидеть, что существует такое же прозрачное решение и для дивов :)

Спасибо за внимание :)

Link to comment
Share on other sites

  • Answers 141
  • Created
  • Last Reply

Top Posters For This Question

Recommended Posts

  • 0

Да, да, да!!!

Присоединяюсь к головоломке, ибо сам уже давно забил на блочную верстку, но "прогрессивность" покоя не дает.

Хотелось бы, что бы весь этот макет был еще и "резиновым", то есть при изменении размеров окна браузера (от минимума до максимума), ни один из блоков не улетал куда нибудь "в зону недосягаемости".

Link to comment
Share on other sites

  • 0

5 баксов - это чуть меньше 150 рублей.

Со всей ответственностью заявляю, с легкостью расстался бы с 5-тью баксами за эффектную реализацию того, что я пока могу сделать только таблицами.

Не "сэмулировать" с кучей недочетов и багов, а именно четко сверстать так, как я сверстал не без помощи таблиц.

PS Скрин могу приложить, если уж на то пошло.

Link to comment
Share on other sites

  • 0

ну не 5 строчек)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<style type="text/css" media="screen">
body { margin:0; padding:0; height:100%;}
#left, #right, #main { height:100%;}
#main { margin: 0 auto; width:1024px;}
#left { width: 200px; background: #face00; float:left; position:absolute;}
#right { width: 824px; background: #cefa00; float:right; position:absolute; margin-left: 200px;}


</style>
</head>
<body>





<div id="main">
<div id="left">1</div>
<div id="right">2</div>

</div>


</body>

</html>

дальше модифицировать по0желанию, думаю идея ясна

Link to comment
Share on other sites

  • 0

Ну здрасти, приехали!

Эт че такое?

#main { margin: 0 auto; width:1024px;}

Не-е-е-е!!! Давайте не халтурить. У меня видеорежим стоит 800x600 и вообще речь идет о "резиновой верстке" валидном HTML+CSS не зависимой от браузера и видеорежима.

Link to comment
Share on other sites

  • 0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<style type="text/css" media="screen">
body { margin:0; padding:0; height:100%;}
#left, #right, #main { height:100%;}
#main { position: absolute; width:100%; }
#left { background: #face00; float:left;}
#right { background: #cefa00; }


</style>
</head>
<body>





<div id="main">
<div id="left">1dddddddd1111111111111111111111111111</div>
<div id="right">2
2
2
2
2
</div>
</div>



</body>

</html>

просто не так прочитал задачу ;) что - давать номер кошелька?)

Link to comment
Share on other sites

  • 0

Девятилап - Вставил в

<div id="left">1dddddddd11111111111111111111111111111dddddddd11111111111111111111111111111dddddddd11111111111111111111111111111dddddddd11111111111111111111111111111dddddddd1111111111111111111111111111</div>

и почему то

улетел куда-то (я его еле нашел) вниз...;)
Link to comment
Share on other sites

  • 0

Ну В общем согласен... Это не придирки.

Действительно, хотелось бы получить "четкий" и "стабильный" макет такой простой задачи. Ведь пока мы не обсуждаем что будет в этих слоях далее (в процессе верстки).

Кстати правда: - А куда overflow: hidden воткнуть... Я чет пробую, а полоска все равно не убирается.;)

Link to comment
Share on other sites

  • 0

Мне вот интересно стало: - А вот такую вот простенькую табличку, можно вообще блоками забацать со всей "стабильностью" и "резиновостью" и насколько блочный код будет оптимален и красив?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Разноцветная таблица</title>
<style type="text/css" media="screen">
td {
border: 1px solid #000;
}
</style>
</head>
<body>
<table width="100%" height="100%" cellpadding="0" cellspacing="5" align="center" border="0">
<tr>
<td colspan="4" bgcolor="#6699FF"> </td>
<td rowspan="4" bgcolor="#FF0099"> </td>
</tr>
<tr>
<td rowspan="4" bgcolor="#663399"> </td>
<td colspan="2" bgcolor="#FF9966"> </td>
<td rowspan="2" bgcolor="#FFCC99"> </td>
</tr>
<tr>
<td rowspan="2" bgcolor="#FF6633"> </td>
<td bgcolor="#FFFFCC"> </td>
</tr>
<tr>
<td colspan="2" bgcolor="#FF3366"> </td>
</tr>
<tr>
<td colspan="4" bgcolor="#0000CC"> </td>
</tr>
</table>
</body>
</html>

Link to comment
Share on other sites

  • 0

<html> 
<head>
<title></title>
<style>
BODY
{
padding:0;
margin:0;
}
#l1, #l2, #l3, #l4, #l5, #l6, #l7, #l8
{
display:block;
margin:0;
padding:0;
overflow:hidden;
}
#l1
{
background-color:#6699FF;
width:80%;
height:20%;
float:left;
}
#l2
{
width:20%;
height:80%;
background-color:#FF0099;
float:right;
}
#l3
{
width:20%;
height:80%;
background-color:#663399;
float:left;
}
#l4
{
width:80%;
height:20%;
background-color:#0000CC;
float:right;
}
#l5
{
background-color:#FF6633;
width:80%;
height:20%;
float:left;
}
#l6
{
background-color:#FF9966;
width:20%;
height:80%;
float:right;
}
#l7
{
background-color:#FF3366;
width:20%;
height:80%;
float:left;
}
#l8
{
background-color:#FFCC99;
width:80%;
height:20%;
float:right;
}
</style>
</head>
<body>
<div style="height:100%; width:100%; position:absolute;">
<div id="l1"> </div>
<div id="l2"> </div>
<div id="l3"> </div>
<div id="l4"> </div>
</div>
<div style="left:20%;top:20%;width:60%; height:60%;background-color:#FFFFCC;position:absolute;">
<div id="l5"> </div>
<div id="l6"> </div>
<div id="l7"> </div>
<div id="l8"> </div>
</div>
</body>
</html>

ГЫ) вышло, не ожидал от себя такких познаний) Вот только проблемка с линиями в опере(постоянно) мозилле(местами) осел схавал(парадокс))) Тлько правда пока без отступов))

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy